<template>
	<view class="container">

		<!-- 点击手搜索框，跳转到搜索页面进行搜索 -->
		<view class="header">
			<input type="text" @click="search()" placeholder="请输入搜索内容" />
		</view>


		<!-- 点击商品分类，加载对应商品 -->
		<view class="category">
			<text class="category-title">商品分类</text>
			<scroll-view class="index_category" scroll-x="true" show-scrollbar="false">
				<view class="index_category_content">
					<view class="index_category_item" v-for="(item,index) in menus" @click="menuClick(item)">
						{{item.fields.name}}
					</view>
				</view>
			</scroll-view>
		</view>


		<!-- swiper轮播图，放置火热售卖的商品，点击可到其详情页 -->
		<view class="Buy-limited-swiper">
			<text class="Buy-limited-title">限时抢购</text>
			<!-- 是否显示面板指示点  面板指示点颜色  是否自动切换  自动切换时间间隔 滑动动画时长 -->
			<swiper class="swiper" circular :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.3)"
				:autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in swipers" @click="swiperClick(item)">
					<image class="swiper-image" :src="'http://127.0.0.1:8002/' + item.fields.pic"></image>
				</swiper-item>
			</swiper>
		</view>


		<!-- 商品分类 自定义组件 -->
		<view class="shopList">
			<!-- 父组件将数据categoryData通过v-bind:（v-bind:可以简化为: ）传递给子组件 shopList ，子组件通过props中键productListData去获取对应的值-->
			<!-- @clickShop为暴露出来的点击事件，在gotoShopDetail()函数 里面去实现点击的逻辑-->
			<shopList @clickShop="gotoShopDetail" v-bind:productListData=categoryData v-bind:CategoryProductListLoadMore=CategoryProductListLoadMore
				@changePage="getCategoryProductList" :title="'分类商品'">
			</shopList>
		</view>

		<!-- 为您推荐 自定义组件 -->
		<view class="shopList" style="margin-bottom: 50px;">
			<shopList @clickShop="gotoShopDetail" v-bind:productListData=RecommendData @changePage="getRecommendProduct" v-bind:RecommendProductListLoadMore=RecommendProductListLoadMore
				:title="'为您推荐'">
			</shopList>
		</view>
	</view>
</template>

<script>
	import shopList from '@/components/shop-list.vue'
	export default {
		components: {
			shopList
		},

		data() {
			return {
				// 菜单数据集
				menus: [],
				// SPU轮播信息
				swipers: [],
				// 当前选中的分类的下标
				currentMenusIndex: 1,
				// 传递到shopList自定义组件的  分类商品 模块 的数据
				categoryData: [],
				// 传递到shopList自定义组件的  推荐商品 模块 的数据
				RecommendData: [],

				categoryListPage: 1,
				categoryListSize: 2,

				RecommendListPage: 1,
				RecommendListSize: 1,
				
				CategoryProductListLoadMore:true,
				RecommendProductListLoadMore:true,
			}
		},
		methods: {
			/**
			 * 菜单的点击事件
			 * @param {Object} menu 
			 */
			menuClick(menu) {
				console.log("点击的分类的ID：", menu.pk)
				// 当前点击的分类的ID
				this.currentMenusIndex = menu.pk;
				// 获取分类下的商品
				this.getCategoryProductList()
			},
			/**
			 * 限时抢购轮播图点击事件
			 * @param {Object} swiper
			 */
			swiperClick(swiperItem) {
				this.gotoShopDetail(swiperItem)
			},
			// 点击单个商品 跳转到商品详情页 当点击ShopList中的商品时，也会通过自定义事件@clickShop传递一个参数过来
			gotoShopDetail(SingleShop) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + SingleShop.pk
				})
			},
			//跳转到搜索页
			search() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},

			/**
			 * 发送请求加载指定分类下的商品列表
			 */
			getCategoryProductList() {
				let that = this
				console.log("获取商品分类的列表,分类的ID为：" + that.currentMenusIndex)
				uni.request({ // 传递当前点击分类的ID到后端进行查询属于该分类下的商品
					url: `http://127.0.0.1:8002/categoryProductList/?category_id=${that.currentMenusIndex}&page=${that.categoryListPage++}&size=${that.categoryListSize}`,
					method: "GET",
					success(res) {
						if(res.data.data == ""){
							that.CategoryProductListLoadMore = false
						}
						console.log(that.CategoryProductListLoadMore)
						that.categoryData.push(...res.data.data)
					}
				})
			},
			getRecommendProduct() {
				console.log("获取推荐商品的列表")
				let that = this
				/**
				 * 发送请求加载 推荐商品 列表
				 */
				uni.request({
					url: `http://127.0.0.1:8002/productRecommend/?page=${that.RecommendListPage++}&size=${that.RecommendListSize}`,
					method: "GET",
					success(res) {
						if(res.data.data){
							that.RecommendProductListLoadMore = false
						}
						console.log(that.RecommendProductListLoadMore)
						that.RecommendData.push(...res.data.data)
					}
				})
			}

		},
		onLoad: function() {
			let that = this
			var loginUser = uni.getStorageSync('login_user')
			/**
			 * 发送请求到后端获取(所有的商品分类)菜单
			 */
			uni.request({
				url: 'http://127.0.0.1:8002/menus/',
				method: "GET",
				success(res) {
					that.menus = res.data.data
				}
			})
			/**
			 * 获取 限时抢购 轮播图 的商品
			 */
			uni.request({
				url: 'http://127.0.0.1:8002/indexSwiper/',
				method: "GET",
				success(res) {
					that.swipers = res.data.data
				}
			})

			/**
			 * 调用封装的函数，发送请求加载指定分类下的商品列表，默认加载第1类，从第1页开始，每页2条
			 */
			this.getCategoryProductList()

			/**
			 * 发送请求加载 推荐商品 列表
			 */
			this.getRecommendProduct()
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F8F8F8;
	}

	/**
	* 搜索框
	*/
	.header {
		height: 60px;
		padding: 0 20px;
		background-color: #FFF;
	}

	.header input {
		padding: 0 10px;
		margin: 10px 0;
		border: 2px solid #ccc;
		width: 95%;
		height: 40px;
		font-size: 16px;
		border-radius: 10px;
	}


	/* 首页的商品分类 */
	.category {
		display: flex;
		flex-direction: column;
		padding: 20px;
		background-color: #FFF;
	}

	.category-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.index_category {
		width: 100%;
		height: 100%;
		line-height: 60px;
		border-bottom: 1px solid #f8e5d7;
	}

	.index_category_content {
		display: flex;
	}

	.index_category .index_category_item {
		padding: 20px;
		line-height: 20px;
		white-space: nowrap;
	}

	/**
	 * 限时抢购轮播图
	 */
	.Buy-limited-swiper {
		display: flex;
		flex-direction: column;
		padding: 20px;
		background-color: #ffffff;
	}

	.Buy-limited-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.swiper {
		width: 100%;
		height: 410px;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	/* 商品推荐 */
	.shopList {
		border-top: 1px solid #f8e5d7;
	}
</style>
